import React from 'react';
import {Spin, Card, Button, Divider, Col, Row} from 'antd';
import PropTypes from 'prop-types';
import {getDetail, abandonSubDealer} from './api';
import {injectIntl} from './intl';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import routes from './routes';
import {dealerExtendAuthorisedMethod, dealerExtendOnlineStatus} from '../Enum';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import {conventEnumValueToString, formatDateTime} from '../utils';
import {hasPermissions} from './utils';
import {PERMISSIONS} from './constants';
import {DATE_FORMAT} from '../constants';
import styles from './style.css';
const {Description} = DescriptionList;

class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {},
    }
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                        rowVersion: res.data.rowVersion
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    handleAbandonClick = () => {
        this.setState({loading: true});
        abandonSubDealer(this.state.data.id, {rowVersion: this.state.data.rowVersion}).then(res => {
            this.setState({loading: false});
            if(res.ok)
                this.props.onClickAbandonSuccess();
        });
    };
    onCancel = () => {
        this.props.history.push(routes.query.url());
    }
    render() {
        const {formatMessage} = this.props.intl;
        const detailData = this.state.data || {};
        return (
            <div>
                <Spin spinning={this.state.loading}>
                    <Card>
                        <DescriptionList size="large" title={<Row>
                            <Col span={6}>
                                {this.props.intl.formatMessage({
                                    id: 'detail.operation.detail',
                                    defaultMessage: '基础信息'
                                })}
                            </Col>
                            <Col className={styles.textAlign} span={18}>
                                {hasPermissions(this.props.permissions, PERMISSIONS.update) &&
                                hasPermissions(detailData.options, PERMISSIONS.update) &&
                                <Button key="return" href={`#${routes.update.format(this.props.id)}`} className={styles.btnMargin} size="small">
                                    {this.props.intl.formatMessage({
                                        id: 'detailPanel.operation.update',
                                        defaultMessage: '编辑'
                                    })}
                                </Button>}
                                {hasPermissions(this.props.permissions, PERMISSIONS.abandon) &&
                                 hasPermissions(detailData.options, PERMISSIONS.abandon) &&
                                <WrappedPopconfirm
                                    id="abandon"
                                    key="abandon"
                                    title={formatMessage({
                                        id: 'detailPanel.popconfirm.message',
                                        defaultMessage: '是否确认作废？'
                                    })}
                                    okText={this.props.intl.formatMessage({
                                        id: 'detailPanel.popconfirm.confirm',
                                        defaultMessage: '确认'
                                    })}
                                    cancelText={this.props.intl.formatMessage({
                                        id: 'detailPanel.popconfirm.cancel',
                                        defaultMessage: '取消'
                                    })}
                                    onConfirm={this.handleAbandonClick}>
                                    <Button size="small" className={styles.btnMargin}>
                                        {this.props.intl.formatMessage({
                                            id: 'detailPanel.operation.abandon',
                                            defaultMessage: '作废'
                                        })}
                                    </Button>
                                </WrappedPopconfirm>}
                            </Col>
                        </Row>}>
                            <Description term={formatMessage({
                                id: 'detail.operation.dealer',
                                defaultMessage: '所属总代'
                            })}>{`(${detailData.dealerCode})${detailData.dealerName}`}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.code',
                                defaultMessage: '编号'
                            })}>{detailData.code}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.name',
                                defaultMessage: '名称'
                            })}>{detailData.name}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.shortCode',
                                defaultMessage: '简码'
                            })}>{detailData.shortCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.shortName',
                                defaultMessage: '简称'
                            })}>{detailData.shortName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.countryName',
                                defaultMessage: '国家'
                            })}>{detailData.countryName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.provinceName',
                                defaultMessage: '省份'
                            })}>{detailData.provinceName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.cityName',
                                defaultMessage: '城市'
                            })}>{detailData.cityName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.address',
                                defaultMessage: '详细地址'
                            })}>{detailData.address}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.contactName',
                                defaultMessage: '联系人姓名'
                            })}>{detailData.contactName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.contactPhone',
                                defaultMessage: '联系电话'
                            })}>{detailData.contactPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.fax',
                                defaultMessage: '传真'
                            })}>{detailData.fax}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.email',
                                defaultMessage: '电子邮件'
                            })}>{detailData.email}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.zipCode',
                                defaultMessage: '邮政编码'
                            })}>{detailData.zipCode}
                            </Description>
                        </DescriptionList>
                        <Divider/>
                        <DescriptionList size="large" title={formatMessage({
                            id: 'detail.operation.extendDetail',
                            defaultMessage: '扩展信息'
                        })}>
                            <Description term={formatMessage({
                                id: 'detail.operation.buildDate',
                                defaultMessage: '建店日期'
                            })}>{formatDateTime(detailData.buildDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.openDate',
                                defaultMessage: '开业日期'
                            })}>{formatDateTime(detailData.openDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.updatedDate',
                                defaultMessage: '更新日期'
                            })}>{formatDateTime(detailData.updatedDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.juridicalPerson',
                                defaultMessage: '法人'
                            })}>{detailData.juridicalPerson}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.juridicalPersonPhone',
                                defaultMessage: '法人电话'
                            })}>{detailData.juridicalPersonPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.juridicalPersonEmail',
                                defaultMessage: '法人Email'
                            })}>{detailData.juridicalPersonEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.generalManager',
                                defaultMessage: '总经理'
                            })}>{detailData.generalManager}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.generalManagerPhone',
                                defaultMessage: '总经理电话'
                            })}>{detailData.generalManagerPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.generalManagerEmail',
                                defaultMessage: '总经理Email'
                            })}>{detailData.generalManagerEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.salesDirector',
                                defaultMessage: '销售总监'
                            })}>{detailData.salesDirector}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.salesDirectorPhone',
                                defaultMessage: '销售总监电话'
                            })}>{detailData.salesDirectorPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.salesDirectorEmail',
                                defaultMessage: '销售总监Email'
                            })}>{detailData.salesDirectorEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.serviceDirector',
                                defaultMessage: '服务总监'
                            })}>{detailData.serviceDirector}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.serviceDirectorPhone',
                                defaultMessage: '服务总监电话'
                            })}>{detailData.serviceDirectorPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.serviceDirectorEmail',
                                defaultMessage: '服务总监Email'
                            })}>{detailData.serviceDirectorEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.marketDirector',
                                defaultMessage: '市场总监'
                            })}>{detailData.marketDirector}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.marketDirectorPhone',
                                defaultMessage: '市场总监电话'
                            })}>{detailData.marketDirectorPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.marketDirectorEmail',
                                defaultMessage: '市场总监Email'
                            })}>{detailData.marketDirectorEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.financialController',
                                defaultMessage: '财务总监'
                            })}>{detailData.financialController}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.financialControllerPhone',
                                defaultMessage: '财务总监电话'
                            })}>{detailData.financialControllerPhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.financialControllerEmail',
                                defaultMessage: '财务总监Email'
                            })}>{detailData.financialControllerEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.salesInterfacePerson',
                                defaultMessage: '销售接口录入人'
                            })}>{detailData.salesInterfacePerson}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.salesInterfacePhone',
                                defaultMessage: '销售接口录入人电话'
                            })}>{detailData.salesInterfacePhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.salesInterfaceEmail',
                                defaultMessage: '销售接口录入人Email'
                            })}>{detailData.salesInterfaceEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.serviceInterfacePerson',
                                defaultMessage: '服务接口录入人'
                            })}>{detailData.serviceInterfacePerson}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.serviceInterfacePhone',
                                defaultMessage: '服务接口录入人电话'
                            })}>{detailData.serviceInterfacePhone}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.serviceInterfaceEmail',
                                defaultMessage: '服务接口录入人Email'
                            })}>{detailData.serviceInterfaceEmail}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.incorporatedDate',
                                defaultMessage: '公司成立日期'
                            })}>{formatDateTime(detailData.incorporatedDate, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.startTime',
                                defaultMessage: '授权经营奇瑞起始时时间'
                            })}>{formatDateTime(detailData.startTime, DATE_FORMAT)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.authorisedMethod',
                                defaultMessage: '授权方式'
                            })}>{conventEnumValueToString(dealerExtendAuthorisedMethod, detailData.authorisedMethod)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.authorisedArea',
                                defaultMessage: '授权区域'
                            })}>{detailData.authorisedArea}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.arrivedAddress',
                                defaultMessage: '收货港'
                            })}>{detailData.arrivedAddress}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.onlineStatus',
                                defaultMessage: '上线状态'
                            })}>{conventEnumValueToString(dealerExtendOnlineStatus, detailData.onlineStatus)}
                            </Description>
                            
                        </DescriptionList>
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" onClick={this.onCancel}>{formatMessage({
                        id: 'detail.operation.onCancel',
                        defaultMessage: '返回'
                    })}</Button>
                </div>
            </div >
        );
    }
}

DetailPanel.propTypes = {
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onClickAbandonSuccess: PropTypes.func.isRequired,
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {
    tableSearch,
    querySearch
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);

const mapStateToProps = state => ({
    permissions: getPermissions(state)
});
const mapDispatchToProps = (dispatch, props) => ({
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onClickAbandonSuccess: () => {
        dispatch(querySearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
